<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>多文件上传</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style type="text/css">
      .fileBtn {
        width: 80px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: dodgerblue;
        color: #fff;
        cursor: pointer;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <div id="choice-box-menu-item" class="fileBtn">选择文件</div>
    <br>
    <div id="submit" class="fileBtn">上传</div>
  </body>
  <script type="text/javascript">
    $(function () {
      var file;
      var files = new Array();
      $("#choice-box-menu-item").click(function () {
        var fileBtn = $("<input type='file' />");
        fileBtn.click();
        fileBtn.change(function () {
          file = this.files[0];
          files.push(file);
          // console.log(file);
          var url = null;
          if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file);
          } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file);
          } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file);
          }
          console.log(url);
          var str;
          if (file.type == "video/mp4") {
            str = $(`<video src="${url}" controls="controls" height="300">您的浏览器不支持 video 标签。</video>`);
          } else {
            str = $("<img src='" + url + "' height='300' />");
          }
          $("#choice-box-menu-item").after(str);
        });
      });
      
      $("#submit").click(function () {
        var formData = new FormData();
        $(files).each(function (index, obj) {
          formData.append("image", obj);
        });
        $.ajax({
          url: "/upload",
          data: formData,
          type: "post",
          processData: false,
          contentType: false,
          dataType: "text",
          success: function (data) {
            alert(data);
          },
          error: function (data) {
            console.log(data);
          },
        });
      });
      
    });
  </script>
</html>